<template>
    <div class="editor-prompt">
        <editor-title title="文本描述" required />

        <!-- 输入框 -->
        <div class="bg-[var(--el-bg-color-page)] rounded-md">
            <el-input
                v-model="value"
                :rows="4"
                :input-style="{
                    boxShadow: 'unset',
                    backgroundColor: 'transparent'
                }"
                resize="none"
                type="textarea"
                placeholder="请输入提示词"
            />

            <div class="flex justify-between p-2 pb-1.5">
                <editor-keyword v-model="value" :engine="props.engine">
                    <template #trigger>
                        <el-button
                            type="default"
                            :link="true"
                            class="!font-normal !text-sm !text-tx-secondary"
                        >
                            <icon name="el-icon-Memo" />
                            <em class="ml-[3px]">关键词推荐</em>
                        </el-button>
                    </template>
                </editor-keyword>
                <div>
                    <el-button
                        v-if="0 > 1"
                        type="default"
                        :link="true"
                        class="!font-normal !text-sm !text-tx-secondary !hover:text-primary"
                        @click="clearPrompt"
                    >
                        <icon name="el-icon-Refresh" />
                        <em class="ml-[3px]">翻译成英文</em>
                    </el-button>
                    <el-button
                        type="primary"
                        :link="true"
                        class="!font-normal !text-sm"
                        @click="clearPrompt"
                    >
                        <icon name="el-icon-Delete" />
                        <em class="ml-[3px]">清空</em>
                    </el-button>

                </div>
            </div>
        </div>

        <!-- 示例 -->
        <div class="flex items-center text-sm text-tx-secondary mt-2 ">
            <div class="flex items-center gap-1">
                <span class="ml-1">随便试试：</span>
            </div>
            <div
                class="flex-1 truncate text-tx-regular cursor-pointer hover:text-primary"
                @click="value = exampleList[exampleIndex]?.content || defaultPrompt"
            >
                {{ exampleList[exampleIndex]?.title || defaultPrompt }}
            </div>
            <el-tooltip effect="dark" content="刷新" placement="bottom">
                <div @click="randomInput()">
                    <icon
                        class="cursor-pointer dark:hover:bg-[rgba(255,255,255,0.05)] hover:bg-[rgba(0,0,0,0.05)] rounded-[12px] p-1 box-content"
                        name="el-icon-RefreshRight"
                        size="18"
                        color="#556477"
                    />
                </div>
            </el-tooltip>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useVModels } from '@vueuse/core'
import drawsPromptApi from '~/api/apply/draws/prompt'
import editorTitle from './editor-title.vue'
import editorKeyword from './editor-keyword.vue'

const emits = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const props = defineProps({
    // 提示词值
    modelValue: {
        type: String,
        default: ''
    },
    // 绘画引擎
    engine: {
        type: String,
        default: ''
    }
})

const { modelValue: value } = useVModels(props, emits)

const defaultPrompt = ref<string>('')
const exampleIndex = ref<number>(0)
const exampleList = ref<DrawsPromptExampleResponse[]>([])

/**
 * 随机提示词
 */
const randomInput = () => {
    if (exampleList.value.length > 0) {
        if (exampleIndex.value < exampleList.value.length - 1) {
            exampleIndex.value++
        } else {
            exampleIndex.value = 0
        }
    }
}

/**
 * 清空提示词
 */
const clearPrompt = () => {
    value.value = ''
}

onMounted(async () => {
    await nextTick()
    exampleList.value = await drawsPromptApi.example(props.engine)
})
</script>
